<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    
   

 
</head>
<body>
    <script>
        // <div class="a b c">
        //     文本内容片断1
        //     <p class="c">
        //         文本内容片断2
        //     </p>
        //     文本内容片断3
        //     <p class="d">
        //         文本片断内容4
        //         <span>文本片断内容5</span>
        //     </p>
        // </div> 

        // 请构建工具方法，可以依据如下数据结构创建出如上元素DOM树 （数据深度未知）
        // let a = document.createTextNode("asdasdasda") 将文本创建成节点
        // dom.appendChild(a)  // 上述代码构建的节点对象可以作为 appendChild 的参数使用
        let vnode = {
            tag:"div",
            class:["a","b","c"],
            children:[
                "文本内容片断1",
                {
                    tag:"p",
                    class:"c",
                    children:[
                        "文本内容片断2",
                    ]
                },
                "文本内容片断3",
                {
                    tag:"p",
                    class:"d",
                    children:[
                        "文本片断内容4",
                        {
                            tag:"span",
                            children:[
                                "文本片断内容5"
                            ]
                        }
                    ]
                } 
            ]
        };

        function createElement(vnode){
            var dom=document.createElement(vnode.tag);//创建div标签   创建p标签
            if(vnode.class && Array.isArray(vnode.class)){
                dom.className=vnode.class.join(" ");
            }else if(vnode.class){
                dom.className=vnode.class;
            }
            for(let node of vnode.children){
                let cdom;
                if(typeof node == "string"){
                    cdom=document.createTextNode(node);
                }else{
                    cdom=createElement(node);
                }
                dom.appendChild(cdom);
            }
            return dom;
            
        }
        var result=createElement(vnode);
        document.body.appendChild(result);
        
       
        
    </script>
</body>
</html>